<template>
  <div class="specialist">
             <div>
      <el-form class="oldIndent_nav" ref="dataForm">
        <div style="margin-bottom:20px;padding-top:5px;">
             <span style="margin-left:60px">院区：</span>
          <el-input placeholder="请输入院区：" style="width:200px"></el-input>
           <span style="margin-left:60px">所属科室：</span>
          <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
          <span style="margin-left:60px">医师姓名：</span>
          <el-input placeholder="请输入姓名" style="width:200px"></el-input>
          <span style="margin-left:60px">联系方式</span>
          <el-input placeholder="请输入电话" style="width:200px"></el-input>
          
           <el-button type="primary" round style="float:right;margin-right:200px">查询</el-button>
        </div>
      </el-form>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" align="center" label="医生编号"></el-table-column>
      <el-table-column prop="name" align="center" label="医生姓名"></el-table-column>
      <el-table-column prop="sex" align="center" label="医生性别"></el-table-column>
      <el-table-column prop="phone" align="center" label="联系方式"></el-table-column>
      <el-table-column prop="rank" align="center" label="医生职称"></el-table-column>
      <el-table-column prop="skill" align="center" label="技能擅长"></el-table-column>
      <el-table-column prop="zhu" align="center" width="450" label="医生主攻"></el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-col :span="24" class="toolbar" style="text-align: center;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-count="pageNum"
        :page-size="pagesize"
        style="margin-top:30px;margin-bottom:30px"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-col>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1, // 初始页
      pagesize: 10, // 当前页面内的列表行数
      pageCount: 1,
      pageNum: 1, //页数
      total: 8,
       options: [
        {
          value: "1",
          label: "眼科"
        },
        {
          value: "2",
          label: "骨科"
        },
        {
          value: "3",
          label: "肛肠科"
        },
        {
          value: "4",
          label: "眼科"
        },
        {
          value: "5",
          label: "神经科"
        }
      ],
      value: "1",
      tableData: [
        {
          id: "86521232",
          name: "刘武",
          sex: "男",
          rank: "主治医师",
          skill: "脊柱外科",
          phone: "1356565656",
          zhu:
            "颈椎病，颈椎间盘突出症，腰椎间盘突出症，颈椎的骨折脱位，还有腰椎骨折以及腰椎滑脱，颈椎腰椎管狭窄症。创伤骨科主要是四肢关节的损伤，骨盆骨折，股骨转子间骨折等等"
        },
        {
          id: "15512245",
          name: "王也",
          sex: "男",
          rank: "副主任",
          skill: "关节外科",
          phone: "1894511234",
          zhu:
            "关节外科主要是一些股骨头的无菌性坏死股骨颈骨折，膝关节的骨性关节炎，半月板损伤，交叉韧带的断裂，还有肩袖损伤。对于手外科主要是一些断肢再植，各种类型的手外伤以及手足畸形的矫正。"
        },
        {
          id: "47841521",
          name: "吴霞",
          sex: "女",
          rank: "主治医师",
          skill: "神经内科",
          phone: "17851512311",
          zhu: "紧张性头痛、偏头痛，头晕、睡眠障碍，脑出血，面瘫"
        },
        {
          id: "98121852",
          name: "孙德阳",
          sex: "男",
          rank: "主治医师",
          skill: "神经外科",
          phone: "15672112545",
          zhu:
            "主治由于外伤导致的脑部、脊髓等神经系统的疾病，例如脑出血出血量危及生命,车祸致脑部外伤，或脑部有肿瘤压迫需手术治疗等。"
        },
        {
          id: "5645612",
          name: "王三",
          sex: "男",
          rank: "主任",
          skill: "肛肠科",
          phone: "13456154561",
          zhu:
            "治疗便秘、肛裂、肛瘘、肛门脓肿、肛门狭窄、肛乳头肥大、肛周湿疹、混合痔、内痔、外痔"
        },
        {
          id: "8112554",
          name: "普卡娅",
          sex: "女",
          rank: "主治医师",
          skill: "儿科",
          phone: "156451212312",
          zhu: "主治儿童传染病，神经，血液，肾脏，肝脏，骨骼"
        },
        {
          id: "5845642",
          name: "任一",
          sex: "男",
          rank: "主治医师",
          skill: "肿瘤科",
          phone: "195321545622",
          zhu:
            "主治乳腺癌、肺癌、肝癌、胃癌、结肠癌、直肠癌、食管癌、胰腺癌、鼻咽癌、膀胱癌、宫颈癌、前列腺癌、卵巢癌、肾癌、甲状腺癌、淋巴瘤、白血病、子宫内膜癌、黑色素瘤、骨肉瘤"
        },
        {
          id: "2165456",
          name: "安利",
          sex: "男",
          rank: "主任",
          skill: "眼科",
          phone: "18645121212",
          zhu:
            "主治中心浆液性视网膜病变、干眼症、交感性眼炎、夜盲症、失明眼部结构、弱视、散光、沙眼、白内障、糖尿病视网膜病变、结膜炎、老花眼、色盲、虹膜异色症、视网膜色素变性、视网膜中央动脉阻塞、视网膜脱落、近视、远视、针眼、雪盲症、霰粒肿、青光眼、飞蚊症等"
        }
      ]
    };
  },
  methods: {
    //当前页
    handleSizeChange: function(pagesize) {
      this.pagesize = pagesize;
    },
    // 换页：更新列表数据
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.specialist {
  margin-top: 55px;
}
</style>